<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>订单</title>
    <link rel="stylesheet" type="text/css" href="../styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/order.css" />
    <link rel="stylesheet" type="text/css" href="../styles/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
    <script src="../js/zepto.min.js"></script>
    <script src="../js/TouchSlide.1.1.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        function confirmReceipt(goodsId) {
            // 1. 发送请求修改订单状态
            fetch(`http://localhost:3000/shopCar/${goodsId}`, {
                method: "PATCH",
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ orderStatus: "已完成" })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json();
            })
            .then(data => {
                console.log('确认收货成功', data);
                location.reload();
            })
            .catch(err => {
                console.error('确认收货失败:', err);
            });
        }
        window.onload = function () {
            const {createApp, ref,computed} = Vue
            const appInstance = createApp({
                setup() {
                    const shopCarList = ref([])
                    const orderCar = ref([])
                    const deliveryFee = 6 //配送费固定

                    // 2. 获取数据后初始化count（确保每个商品有数量属性）
                    let getData = function(){
                        fetch(`http://localhost:3000/shopCar`)
                            .then(response => response.json())
                            .then(data => {
                                shopCarList.value = data[0]
                                orderCar.value = data
                                setTimeout(() => { // 延迟一小段时间，确保 DOM 已更新
                                    TouchSlide({
                                        slideCell: "#tabox",
                                        defaultIndex: 0,
                                    });
                                }, 0);
                            })
                            .catch(err => console.error('获取数据失败:', err));
                    }
                    getData()

                    const sumPrice =  computed(() =>{
                        return (shopCarGoods) =>{
                            let sum = deliveryFee;
                            for (let i = 1; i < shopCarGoods.length+1; i++) {
                                sum = Number.parseFloat((shopCarGoods[i-1].count * shopCarGoods[i-1].price).toFixed(2)) + sum;
                            }
                            return sum;
                        }
                    })

                    let sumCount = computed(() =>{
                        return (shopCarGoods) =>{
                            let sum = 0;
                            for (let i = 1; i < shopCarGoods.length+1; i++) {
                                sum = shopCarGoods[i-1].count + sum;
                            }
                            return sum;
                        }
                    })

                    const activeOrders = computed(() => {
                        return orderCar.value.filter(order => order.orderStatus === "配送中");
                    });

                    const completedOrders = computed(() => {
                        return orderCar.value.filter(order => order.orderStatus === "已完成");
                    });

                    const cancelledOrders = computed(() => {
                        return orderCar.value.filter(order => order.orderStatus === "已取消");
                    });

                    let isConfirm = (status) =>{
                        if(status=="配送中") return true;
                        else return false;
                    }

                    return {
                        shopCarList,
                        sumPrice,
                        sumCount,
                        isConfirm,
                        orderCar,
                        activeOrders,
                        completedOrders,
                        cancelledOrders,
                        getData
                    }
                }
            }).mount('#app');
            window.app = appInstance;
        }
    </script>
<body>
    <div class="wrap" id="app">
        <div class="container">
            <div id="tabox" class="tabbox">
                <!-- tab start -->
                <div class="hd">
                    <ul>
                        <li><a href="#">全部</a></li>
                        <li><a href="#">进行中</a></li>
                        <li><a href="#">已完成</a></li>
                        <li><a href="#">已取消</a></li>
                    </ul>
                </div>
                <!-- tab end -->
                <div class="bd">
                    <!--全部订单-->
                    <ul>
                        <li v-for="goods in orderCar" :key="goods.id">
                            <div class="order-no"><span>订单号：<i>{{ goods.id }}</i></span>
                                <span class="order-status"></span><span>{{ goods.orderStatus }}</span>
                            </div>
                            <div class="order-detail">
                                <img :src="goods.shopCarGoods[0].imgUrl" />
                                <div class="order-detail-box">
                                    <div class="order-name">{{ goods.shop }}</div>
                                    <div class="order-summary">
                                        <p v-for="(item,index) in goods.shopCarGoods">{{ item.names }} x {{ item.count }}</p>
                                    </div>
                                    <div class="order-price-wrap">
                                        共{{ sumCount(goods.shopCarGoods) }}件商品
                                        <span class="selling-price">￥ {{ sumPrice(goods.shopCarGoods) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="order-item-footer" v-if="isConfirm(goods.orderStatus)">
                                <button :onclick="`confirmReceipt(${JSON.stringify(goods.id)})`"  class="order-btn cancel-btn">确认收货</button>
                            </div>
                        </li>
                    </ul>
                    <!--进行中订单-->
                    <ul>
                        <li v-for="goods in activeOrders">
                            <div class="order-no"><span>订单号：<i>{{ goods.id }}</i></span>
                                <span class="order-status"></span><span>{{ goods.orderStatus }}</span>
                            </div>
                            <div class="order-detail">
                                <img :src="goods.shopCarGoods[0].imgUrl" />
                                <div class="order-detail-box">
                                    <div class="order-name">{{ goods.shop }}</div>
                                    <div class="order-summary">
                                        <p v-for="(item,index) in goods.shopCarGoods">{{ item.names }} x {{ item.count }}</p>
                                    </div>
                                    <div class="order-price-wrap">
                                        共{{ sumCount(goods.shopCarGoods) }}件商品
                                        <span class="selling-price">￥ {{ sumPrice(goods.shopCarGoods) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="order-item-footer" v-if="isConfirm(goods.orderStatus)">
                                <button :onclick="`confirmReceipt(${JSON.stringify(goods.id)})`"  class="order-btn cancel-btn">确认收货</button>
                            </div>
                        </li>
                    </ul>
                    <!--已完成订单-->
                    <ul>
                        <li v-for="goods in completedOrders">
                            <div class="order-no"><span>订单号：<i>{{ goods.id }}</i></span>
                                <span class="order-status"></span><span>{{ goods.orderStatus }}</span>
                            </div>
                            <div class="order-detail">
                                <img :src="goods.shopCarGoods[0].imgUrl" />
                                <div class="order-detail-box">
                                    <div class="order-name">{{ goods.shop }}</div>
                                    <div class="order-summary">
                                        <p v-for="(item,index) in goods.shopCarGoods">{{ item.names }} x {{ item.count }}</p>
                                    </div>
                                    <div class="order-price-wrap">
                                        共{{ sumCount(goods.shopCarGoods) }}件商品
                                        <span class="selling-price">￥ {{ sumPrice(goods.shopCarGoods) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="order-item-footer" v-if="isConfirm(goods.orderStatus)">
                                <button :onclick="`confirmReceipt(${JSON.stringify(goods.id)})`"  class="order-btn cancel-btn">确认收货</button>
                            </div>
                        </li>
                    </ul>
                    <!--已取消订单-->
                    <ul>
                        <li v-for="goods in cancelledOrders">
                            <div class="order-no"><span>订单号：<i>{{ goods.id }}</i></span>
                                <span class="order-status"></span><span>{{ goods.orderStatus }}</span>
                            </div>
                            <div class="order-detail">
                                <img :src="goods.shopCarGoods[0].imgUrl" />
                                <div class="order-detail-box">
                                    <div class="order-name">{{ goods.shop }}</div>
                                    <div class="order-summary">
                                        <p v-for="(item,index) in goods.shopCarGoods">{{ item.names }} x {{ item.count }}</p>
                                    </div>
                                    <div class="order-price-wrap">
                                        共{{ sumCount(goods.shopCarGoods) }}件商品
                                        <span class="selling-price">￥ {{ sumPrice(goods.shopCarGoods) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="order-item-footer" v-if="isConfirm(goods.orderStatus)">
                                <button :onclick="`confirmReceipt(${JSON.stringify(goods.id)})`"  class="order-btn cancel-btn">确认收货</button>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>


        </div>
        <!-- 底部 start -->
        <footer class="footer">
            <ul>
                <li>
                    <a href="../index.html">
                        <span class="iconfont icon-shouye"></span> 首页
                    </a>
                </li>
                <li>
                    <a href="shopcart.html">
                        <span class="iconfont icon-gouwuche"></span> 购物车
                    </a>
                </li>
                <li>
                    <a href="order.html" class="tabcur">
                        <span class="iconfont icon-dingdan"></span> 订单
                    </a>
                </li>
                <li>
                    <a href="user.html">
                        <span class="iconfont icon-wode"></span> 我的
                    </a>
                </li>
            </ul>
        </footer>
        <!-- 底部 end -->
    </div>
</body>

</html>